<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_背景属性</title>
    <style>
        div {
            height: 400px;
            width: 400px;
            /*background-color: red;*/
            /*background-image: url(../Snipaste_2025-07-22_16-54-27.png);*/
            /*!*background-repeat: repeat-x;*!*/
            /*background-repeat: no-repeat;*/
            /*background-position: left;*/
            background: url(../Snipaste_2025-07-22_16-54-27.png) no-repeat right;
        }
    </style>
</head>
<body>
<!--
    背景相关的属性：
        background-color:给元素上背景色(方式满足常用颜色的几种方式即可)
        background-image:给元素上背景图片;url(图片的路径)
        background-repeat:给元素上背景图片的重复方式;
            属性值:
                repeat-x:只在水平方向上重复
                repeat-y：只在垂直方向上重复
                no-repeat:不重复
        background-position:给元素上背景图片的位置;
            通过关键字进行设置：
                写两个值，用空格隔开
                    水平: left、center、right
                    垂直: top、center、bottom
                    如果只写一个值，另一个方向的取值为center
        background:复合属性 中间用空格进分隔,没有数量和顺序的要求。


-->
    <div></div>
</body>
</html>